<template>
  <div class="page-container animate-fade-in">
    <div class="page-header">
      <h1 class="gradient-text">邮件发送服务</h1>
      <p>支持生日邮件等多种模板，快速发送个性化邮件</p>
    </div>

    <div class="card-container">
      <h3>
        <el-icon><Message /></el-icon>
        生日邮件发送
      </h3>
      
      <el-form :model="mailForm" label-width="100px" class="mail-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="收件人">
              <el-input
                v-model="mailForm.recipient"
                placeholder="请输入收件人邮箱"
                clearable
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="收件人姓名">
              <el-input
                v-model="mailForm.recipientName"
                placeholder="请输入收件人姓名"
                clearable
              >
                <template #prefix>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="生日日期">
              <el-date-picker
                v-model="mailForm.birthday"
                type="date"
                placeholder="选择生日日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="邮件主题">
              <el-input
                v-model="mailForm.subject"
                placeholder="请输入邮件主题"
                clearable
              >
                <template #prefix>
                  <el-icon><Edit /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="祝福内容">
          <el-input
            v-model="mailForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入生日祝福内容..."
            show-word-limit
            maxlength="500"
          />
        </el-form-item>

        <el-form-item label="邮件模板">
          <el-select v-model="mailForm.template" placeholder="选择邮件模板" style="width: 100%">
            <el-option label="生日祝福模板" value="birth" />
            <el-option label="节日祝福模板" value="holiday" />
            <el-option label="自定义模板" value="custom" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="sendMail"
            :loading="sending"
            size="large"
            class="send-btn"
          >
            <el-icon><Promotion /></el-icon>
            发送邮件
          </el-button>
          
          <el-button @click="resetForm" size="large">
            <el-icon><RefreshLeft /></el-icon>
            重置
          </el-button>
          
          <el-button @click="previewMail" size="large">
            <el-icon><View /></el-icon>
            预览
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 邮件预览对话框 -->
    <el-dialog v-model="previewVisible" title="邮件预览" width="60%">
      <div class="mail-preview">
        <h4>主题：{{ mailForm.subject || '生日快乐！' }}</h4>
        <div class="preview-content">
          <p>亲爱的 {{ mailForm.recipientName || '朋友' }}：</p>
          <p>{{ mailForm.content || '祝你生日快乐，身体健康，工作顺利！' }}</p>
          <p class="signature">此致<br/>敬礼！</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mailApi } from '@/api/mail'

const mailForm = ref({
  recipient: '',
  recipientName: '',
  birthday: '',
  subject: '生日快乐！',
  content: '',
  template: 'birth'
})

const sending = ref(false)
const previewVisible = ref(false)

const sendMail = async () => {
  if (!mailForm.value.recipient) {
    ElMessage.warning('请输入收件人邮箱')
    return
  }
  
  if (!mailForm.value.recipientName) {
    ElMessage.warning('请输入收件人姓名')
    return
  }

  try {
    await ElMessageBox.confirm('确认发送邮件吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    })
    
    sending.value = true
    const mailData = JSON.stringify(mailForm.value)
    const response = await mailApi.sendBirthMail(mailData)
    
    if (response.code === 200) {
      ElMessage.success('邮件发送成功！')
      resetForm()
    } else {
      ElMessage.error(response.message || '邮件发送失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('邮件发送失败：' + error.message)
    }
  } finally {
    sending.value = false
  }
}

const resetForm = () => {
  mailForm.value = {
    recipient: '',
    recipientName: '',
    birthday: '',
    subject: '生日快乐！',
    content: '',
    template: 'birth'
  }
}

const previewMail = () => {
  previewVisible.value = true
}
</script>

<style scoped lang="scss">
.page-header {
  text-align: center;
  margin-bottom: 40px;
  
  h1 {
    font-size: 2rem;
    margin-bottom: 8px;
  }
  
  p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
  }
}

.card-container {
  h3 {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    color: #333;
    
    .el-icon {
      margin-right: 8px;
    }
  }
}

.mail-form {
  .send-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 12px 32px;
    
    &:hover {
      opacity: 0.9;
    }
  }
}

.mail-preview {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 8px;
  
  h4 {
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }
  
  .preview-content {
    line-height: 1.8;
    color: #555;
    
    p {
      margin-bottom: 12px;
    }
    
    .signature {
      text-align: right;
      margin-top: 24px;
      color: #888;
    }
  }
}
</style>